<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" href="../favicon.ico" />
	<title>3_虚拟DOM和真实DOM</title>
</head>
<body>
	<!--  准备好一个容器 -->
	<div id="test"></div>
	
	<div id="demo"></div>
		
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	
	<script type="text/javascript"> /* 使用Js创建虚拟DOM, 实际开发中不推荐，代码量较大 */
		//1.创建虚拟DOM
		const VDOM = React.createElement('h1', {id:'title'}, 'Hello React')
		//2. 渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById("test"))
		console.log('虚拟DOM', VDOM)
		const TDOM = document.getElementById('demo')
		console.log('真实DOM', TDOM)
		// debugger
		// console.log(typeof VDOM)
		// console.log(VDOM instanceof Object)
		/**
		 * 关于虚拟DOM:
		 * 1. 本质是Object类型的对象(一般对象)
		 * 2. 虚拟DOM比较"轻",真实DOM比较"重"，
		 * 3.虚拟DOM最终会被React转化为展示DOM,呈现在页面上
		 */
		
		
	</script>
</body>
</html>
